<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>960 Grid System &mdash; Demo</title>
	<link rel="stylesheet" href="../../source/assets/jet.reset.css" type="text/css" />
	<link rel="stylesheet" href="../../source/assets/jet.typography.css" type="text/css" />
	<link rel="stylesheet" href="../../source/assets/jet.font.css" type="text/css" />
	<link rel="stylesheet" href="../../source/assets/jet.960grid.css" />
	<style>

	body {
		background: #123;
		border-top: 5px solid #000;
		color: #333;
		font-size: 11px;
		padding: 20px 0 40px;
	}

	a {
		color: #fff;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	h1 {
		font-family: Georgia, serif;
		font-weight: normal;
		text-align: center;
	}

	h2 {
		padding: 20px 0 0;
		text-align: center;
	}

	p {
		border: 1px solid #666;
		overflow: hidden;
		padding: 10px 0;
		text-align: center;
	}

	.container_12 {
		background: #fff url(../../source/assets/images/12_col.gif) repeat-y;
		margin-bottom: 20px;
	}

	.container_16 {
		background: #fff url(../../source/assets/images/16_col.gif) repeat-y;
	}

	</style>
</head>
<body>
<h1>
	<a href="http://960.gs/">960 Grid System</a>
</h1>
<div class="container_12">
	<h2>
		12 Column Grid
	</h2>
	<div class="grid_12">
		<p>
			940px
		</p>
	</div>
	<!-- end .grid_12 -->
	<div class="clear"></div>
	<div class="grid_1">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1 -->
	<div class="grid_11">
		<p>
			860px
		</p>
	</div>
	<!-- end .grid_11 -->
	<div class="clear"></div>
	<div class="grid_2">
		<p>
			140px
		</p>
	</div>
	<!-- end .grid_2 -->
	<div class="grid_10">
		<p>
			780px
		</p>
	</div>
	<!-- end .grid_10 -->
	<div class="clear"></div>
	<div class="grid_3">
		<p>
			220px
		</p>
	</div>
	<!-- end .grid_3 -->
	<div class="grid_9">
		<p>
			700px
		</p>
	</div>
	<!-- end .grid_9 -->
	<div class="clear"></div>
	<div class="grid_4">
		<p>
			300px
		</p>
	</div>
	<!-- end .grid_4 -->
	<div class="grid_8">
		<p>
			620px
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="clear"></div>
	<div class="grid_5">
		<p>
			380px
		</p>
	</div>
	<!-- end .grid_5 -->
	<div class="grid_7">
		<p>
			540px
		</p>
	</div>
	<!-- end .grid_7 -->
	<div class="clear"></div>
	<div class="grid_6">
		<p>
			460px
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="grid_6">
		<p>
			460px
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="clear"></div>
	<div class="grid_1 suffix_11">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.suffix_11 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_1 suffix_10">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_1.suffix_10 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_2 suffix_9">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_2.suffix_9 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_3 suffix_8">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_3.suffix_8 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_4 suffix_7">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_4.suffix_7 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_5 suffix_6">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_5.suffix_6 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_6 suffix_5">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_6.suffix_5 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_7 suffix_4">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_7.suffix_4 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_8 suffix_3">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_8.suffix_3 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_9 suffix_2">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_9.suffix_2 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_10 suffix_1">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_10.suffix_1 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_11">
		<p>
			60px
		</p>
	</div>
	<!-- end .grid_1.prefix_11 -->
	<div class="clear"></div>
	<div class="grid_6 push_6">
		<div class="grid_1 alpha">
			<p>
				60px
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega">
			<p>
				380px
			</p>
		</div>
		<!-- end .grid_5.omega -->
		<div class="clear"></div>
		<div class="grid_3 alpha">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_3.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_6.push_6 -->
	<div class="grid_6 pull_6">
		<div class="grid_3 alpha">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_3.omega -->
		<div class="clear"></div>
		<div class="grid_1 alpha">
			<p>
				60px
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega">
			<p>
				380px
			</p>
		</div>
		<!-- end .grid_5.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_6.pull_6 -->
	<div class="clear"></div>
</div>
<!-- end .container_12 -->
<div class="container_16">
	<h2>
		16 Column Grid
	</h2>
	<div class="grid_16">
		<p>
			940px
		</p>
	</div>
	<!-- end .grid_16 -->
	<div class="clear"></div>
	<div class="grid_1">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1 -->
	<div class="grid_15">
		<p>
			880px
		</p>
	</div>
	<!-- end .grid_15 -->
	<div class="clear"></div>
	<div class="grid_2">
		<p>
			100px
		</p>
	</div>
	<!-- end .grid_2 -->
	<div class="grid_14">
		<p>
			820px
		</p>
	</div>
	<!-- end .grid_14 -->
	<div class="clear"></div>
	<div class="grid_3">
		<p>
			160px
		</p>
	</div>
	<!-- end .grid_3 -->
	<div class="grid_13">
		<p>
			760px
		</p>
	</div>
	<!-- end .grid_13 -->
	<div class="clear"></div>
	<div class="grid_4">
		<p>
			220px
		</p>
	</div>
	<!-- end .grid_4 -->
	<div class="grid_12">
		<p>
			700px
		</p>
	</div>
	<!-- end .grid_12 -->
	<div class="clear"></div>
	<div class="grid_5">
		<p>
			280px
		</p>
	</div>
	<!-- end .grid_5 -->
	<div class="grid_11">
		<p>
			640px
		</p>
	</div>
	<!-- end .grid_11 -->
	<div class="clear"></div>
	<div class="grid_6">
		<p>
			340px
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="grid_10">
		<p>
			580px
		</p>
	</div>
	<!-- end .grid_10 -->
	<div class="clear"></div>
	<div class="grid_7">
		<p>
			400px
		</p>
	</div>
	<!-- end .grid_7 -->
	<div class="grid_9">
		<p>
			520px
		</p>
	</div>
	<!-- end .grid_9 -->
	<div class="clear"></div>
	<div class="grid_8">
		<p>
			460px
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="grid_8">
		<p>
			460px
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="clear"></div>
	<div class="grid_1 suffix_15">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.suffix_15 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_1 suffix_14">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_1.suffix_14 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_2 suffix_13">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_2.suffix_13 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_3 suffix_12">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_3.suffix_12 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_4 suffix_11">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_4.suffix_11 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_5 suffix_10">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_5.suffix_10 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_6 suffix_9">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_6.suffix_9 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_7 suffix_8">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_7.suffix_8 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_8 suffix_7">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_8.suffix_7 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_9 suffix_6">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_9.suffix_6 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_10 suffix_5">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_10.suffix_5 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_11 suffix_4">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_11.suffix_4 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_12 suffix_3">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_12.suffix_3 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_13 suffix_2">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_13.suffix_2 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_14 suffix_1">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_14.suffix_1 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_15">
		<p>
			40px
		</p>
	</div>
	<!-- end .grid_1.prefix_15 -->
	<div class="clear"></div>
	<div class="grid_8 push_8">
		<div class="grid_1 alpha">
			<p>
				40px
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega">
			<p>
				400px
			</p>
		</div>
		<!-- end .grid_7.omega -->
		<div class="clear"></div>
		<div class="grid_4 alpha">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_4.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_8.push_8 -->
	<div class="grid_8 pull_8">
		<div class="grid_4 alpha">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega">
			<p>
				220px
			</p>
		</div>
		<!-- end .grid_4.omega -->
		<div class="clear"></div>
		<div class="grid_1 alpha">
			<p>
				40px
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega">
			<p>
				400px
			</p>
		</div>
		<!-- end .grid_7.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_8.pull_8 -->
	<div class="clear"></div>
</div>
<!-- end .container_16 -->
</body>
</html>